When two or more adjacent elements on a page specify an intervening margin, it is desirable that the margins be collapsed to form a single common margin of a size that is usually smaller than the sum of margins of individual elements. One standard that relates to this problem, cascading style sheets (CSS), defines a number of rules for how adjacent margins should be collapsed, what the resulting size of a common margin needs to be, and how do certain special objects behave when located in the area of collapsing margins (the “margin neighborhood”). These rules can be quite complex and differ from the rules used in word processors. Moreover, none of the existing CSS version 2.1 browsers support these rules correctly.
One of the difficult problems comes from the fact that the result of margin collapsing between blocks can affect the positions of float objects (“floats”, and other out-of-flow objects). Additionally, the positions of floats can affect positions of in-flow elements with a designated “clear” property. (An element with the “clear” property requests that no floats be placed next to the element on the page—at the same height). Elements with the “clear” property can be part of the margin neighborhood and a change in position of the element results in a change in the calculated size of common margin. This initiates a circular process that makes determination of the final result a complex task.
Another type of complexity results from objects that are referred to as “empty”. Empty objects have no in-flow content, but can have out-of-flow content making the positioning of the content a complex consideration. The rules for positioning empty objects differ. Some rules call for analyzing only part of the margin neighborhood, so the positions are affected by a different set of elements. A third type of complexity is introduced from a hierarchical nature of documents and a requirement that all objects, including nested child objects, take part in margin collapsing.